{extend name="base" /}
{block name="body"}
<style type="text/css">
#wBox{ width:524px; margin:0px auto 30px;}
#wBox ul{ border: 1px solid #e6e6e6; width:168px; float:left; list-style:none; padding:10px; height:200px; overflow:auto;}
#wBox ul li{ border:1px solid #ccc; height:22px; line-height:22px; text-align:center; margin:3px; cursor:pointer;}
#wBox ul li.noSelect{ border-color:#000; background:#eee; color:#ccc; cursor:default;}
#wBox ul li.biaoji{ background:#FFC; border-color:#F90; font-weight:bold;}
#wBox ul#listBox1{ margin-right:10px;}
#wBox ul#listBox2{ float:right;}
#liAdd,liRemove{font-size: 14px;margin: 0px auto;display: block;}
.cf{ clear:both;}
.move{width: 50px;margin: auto;border: 1px solid #e6e6e6;text-align: center;padding: 10px;cursor: pointer;}
.pos_cen{position: relative;top: 60px;width: 70px; margin: auto;}
</style>
<div class="layui-body">
    <!--tab标签-->
    <div class="layui-tab layui-tab-brief">
        <ul class="layui-tab-title">
            <li class=""><a href="{:url('admin/category/index')}">栏目管理</a></li>
            <li class="layui-this">添加栏目</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <form class="layui-form form-container" action="{:url('admin/category/save')}" method="post">
                    <div class="layui-form-item">
                        <label class="layui-form-label">上级栏目</label>
                        <div class="layui-input-block">
                            <select name="pid" lay-verify="required">
                                <option value="0">一级栏目</option>
                                {foreach name="category_level_list" item="vo"}
                                <option value="{$vo.id}" {if condition="$pid==$vo.id"} selected="selected"{/if}>{neq name="vo.level" value="1"}|{php}for($i=1;$i<$vo['level'];$i++){echo ' ----';}{/php}{/neq} {$vo.name}</option>
                                {/foreach}
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">栏目名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" value="" required  lay-verify="required" placeholder="请输入栏目名称" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">栏目拼音</label>
                        <div class="layui-input-block">
                            <input type="text" name="pingying" value="" required  lay-verify="required" placeholder="请输入栏目拼音" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">缩略图</label>
                        <div class="layui-input-block">
                            <input type="text" name="thumb" value="" class="layui-input layui-input-inline" id="thumb">
                            <input type="file" name="file" class="layui-upload-file">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">内容</label>
                        <div class="layui-input-block">
                            <textarea name="content" placeholder="" class="layui-textarea"></textarea>
                        </div>
                    </div>
                    
                    <div class="layui-form-item">
                        <label class="layui-form-label">SEO标题</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" value="" placeholder="请输入SEO标题" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">SEO关键字</label>
                        <div class="layui-input-block">
                            <input type="text" name="keyword" value="" placeholder="请输入SEO关键字" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">SEO说明</label>
                        <div class="layui-input-block">
                            <textarea name="description" placeholder="请输入SEO说明" class="layui-textarea"></textarea>
                        </div>
                    </div>
                    
                    <div class="layui-form-item">
                        <label class="layui-form-label">排序</label>
                        <div class="layui-input-block">
                            <input type="text" name="sort" value="0" required  lay-verify="required" class="layui-input">
                        </div>
                    </div>
                    
                    <div class="layui-form-item">
                        <label class="layui-form-label">是否导航</label>
                        <div class="layui-input-block">
                            <input type="radio" name="is_nav" value="1" title=是>
                            <input type="radio" name="is_nav" value="0" title="否" checked="checked">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">是否筛选</label>
                        <div class="layui-input-block">
                            <input type="radio" name="is_screening" value="1" title="是" checked="checked">
                            <input type="radio" name="is_screening" value="0" title="否">
                        </div>
                    </div>
                    
<!--                    <div class="layui-form-item">
                        <label class="layui-form-label">相关栏目</label>
                        <div id="wBox">
                        <ul id="listBox2"></ul>
                            <ul id="listBox1">
                            <li class="noSelect"><em>1</em></li>
                            {foreach name="category_level_list" item="vo"}
                            <li><em data-id="{$vo.id}">{$vo.name}</em></li>
                            {/foreach}
                            
                            
                            </ul>
                        <div class="pos_cen">
                            <div id="liAdd"><div class="move">添加→</div></div>
                            <div id="liRemove" style="margin-top: 20px;"><div class="move">←移除</div></div>
                        </div>
                        
                        <div class="cf"></div>
                    </div>
                    </div>-->
                    
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <input type="hidden" name="correlation_ids" value="" id="liVal">
                            <button class="layui-btn" lay-submit lay-filter="*">保存</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script>
$(function(){
	
	//清空
	var lival = "";
	$('#liVal').val(lival);
	//选择
	$('#wBox').on('click','li:not(".noSelect")',function(){
		$(this).toggleClass('biaoji');
	})
	//添加
	$('#liAdd').click(function(){	
		if($('#listBox1>li').hasClass('biaoji')){
			var selectLi = $('#listBox1>li.biaoji');
			var liHtml = "";
			lival = $('#liVal').val();
			for(var i=0; i<selectLi.length; i++){
				liHtml += '<li>'+selectLi.eq(i).html()+'</li>';
				lival += selectLi.eq(i).find('em:first').data('id')+',';
				$('#liVal').val(lival);
				selectLi.eq(i).remove();
			}
			$(liHtml).appendTo('#listBox2');
		}else{
                    layer.msg('请选择相关联的栏目');
		}
	})
	//移除
	$('#liRemove').click(function(){
		if($('#listBox2>li').hasClass('biaoji')){
			var selectLi = $('#listBox2>li.biaoji');
			var liHtml = "";
			for(var i=0; i<selectLi.length; i++){
				liHtml += '<li>'+selectLi.eq(i).html()+'</li>';
				var liMove = selectLi.eq(i).find('em:first').data('id')+',';
				liMove = $('#liVal').val().replace(liMove,'');
				$('#liVal').val(liMove);
				selectLi.eq(i).remove();
			}
			$(liHtml).appendTo('#listBox1');
		}else{
			 layer.msg('请选择相关联的栏目');
		}
	})
});
</script>
{/block}